<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>查询商品案例</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			.w {
				width: 1200px;
				margin: 0 auto;
			}
			.box .search {
				width: 1000px;
				height: 50px;
				line-height: 50px;
				margin: 0 auto;
				background-color: purple;
			}
			.box .start,.end,.proname{
				width: 200px;
				height: 35px;
				outline: none;
			}
			.box .pricesearch,.search_btn {
				width: 80px;
				height: 35px;
				border: 0;
				outline: none;
				vertical-align: middle;
				cursor: pointer;
			}
			.tablelist {
				width: 1100px;
				height: 400px;
				margin: 0 auto;
				padding: 10px 50px;
				background-color: pink;
			}
			.tablelist table {
				width: 100%;
				border-spacing: 0;
				border-collapse: collapse;
			}
			.tablelist table thead tr {
				width: 100%;
				height: 30px;
				font-size: 16px;
				border: 1px solid #ccc;
			}
			.tablelist table thead tr th {
				border: 2px solid #ccc;
			}
			.tablelist table tbody {
				width: 100%;
			}
			.tablelist table tbody tr {
				height: 30px;
			}
			.tablelist table tbody tr td {
				border: 2px solid #ccc;
				height: 30px;
				line-height: 30px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div class="box w">
			<div class="search">
				价格范围:
				<input type="text" name="" id="" class="start" value="" />-
				<input type="text" name="" id="" class="end" value="" />
				<button class="pricesearch">搜索</button>
				商品名称：
				<input type="text" name="" id="" class="proname" value="" />
				<button class="search_btn">确定</button>
			</div>
			<div class="tablelist">
				<table>
					<thead>
						<tr>
							<th>id</th>
							<th>商品名称</th>
							<th>价格</th>
						</tr>
					</thead>
					<tbody>
						
					</tbody>
				</table>
			</div>
		</div>
		<script type="text/javascript">
			var data = [
			{id:1,
			 name:'小米手机',
			 price:1999
			},
			
			{id:2,
			 name:'小米手机',
			 price:3000
			},
			
			{id:3,
			 name:'小米手机',
			 price:600
			},
			
			{id:4,
			 name:'蓝牙耳机',
			 price:1699
			},
			]
			var tbody = document.querySelector('tbody');
			//遍历数组
			data.forEach(function(value,index) {
				//创建节点
				var tr = '<tr><td>' + value.id+ '</td><td>' + value.name+ '</td><td>' + value.price+ '</td></tr>';
				//追加到tbody里面
				tbody.insertAdjacentHTML('beforeend',tr);
			});
			//搜索价格范围
			var pricebtn = document.querySelector('.pricesearch');
			var start = document.querySelector('.start');
			var end = document.querySelector('.end');
			pricebtn.addEventListener('click',function() {
				//筛选符合条件的
				var newArr = data.filter(function(value,index) {
					return value.price >= start.value && value.price <= end.value;
				})
				
				//将原来的tbody置空
				tbody.innerHTML = '';
				//遍历结果
				newArr.forEach(function(value,index) {
					var tr = '<tr><td>' + value.id + '</td><td>' + value.name + '</td><td>' + value.price + '</td></tr>';
					tbody.insertAdjacentHTML('beforeend',tr);
				})
				
			})
			//根据商品名称查询
			var search_btn = document.querySelector('.search_btn');
			var proname = document.querySelector('.proname');
			search_btn.addEventListener('click',function() {
				var arr = []
				data.some(function(value,index) {
					if(value.name == proname.value) {
						arr.push(value);
						return true;
					}
				})
				tbody.innerHTML = ''
				//渲染页面
				arr.forEach(function(value,index) {
					var tr = '<tr><td>' + value.id + '</td><td>' + value.name + '</td><td>' + value.price + '</td></tr>';
					tbody.insertAdjacentHTML('beforeend',tr);
				})
			})
			
		</script>
	</body>
</html>
